<template>
  <view class="content">
    <uni-nav-bar @clickLeft="ui.back()" title="首页" />
    <!-- 轮播图 -->
    <swiper class="swiper" circular :indicator-dots="data.indicatorDots" :autoplay="data.autoplay"
      :interval="data.interval" :duration="data.duration">
      <swiper-item v-for="image in images" :key="image">
        <view class="swiper-item uni-bg-red">
          <image class="image" :src="image" mode=""></image>
        </view>
      </swiper-item>
    </swiper>

    <!-- 菜单 -->
    <view class="t-ju-between menu_tool">
      <view class="menu_item t-center">
        <image class="image" src="@/static/user/1.png" mode=""></image>
        <view class="span">设计预约</view>
      </view>
      <view class="menu_item t-center">
        <image class="image" src="@/static/user/2.png" mode=""></image>
        <view class="span">设计方案</view>
      </view>
      <!-- <view class="menu_item t-center">
        <image class="image" src="@/static/user/3.png" mode=""></image>
        <view class="span">商城</view>
      </view> -->
    </view>
    <!-- 广告 -->
    <image src="@/static/design/default.png" mode="" class="advertisement"></image>
    <!-- <view class="lis_title">
      热销新品
    </view>
    <view class="listStyle t-ju-between">
      <view class="ls_item" v-for="(item,index) in dataList" :key="index">
        <image class="icon" src="@/static/design/default.png" mode=""></image>
        <view class="ls_title t-ali-center">
          <view class="ls_tle_type">
            自营
          </view>
          <view class="ls_tle_span">
            {{item.name}}
          </view>
        </view>
        <view class="ls_content t-ju-between">
          <view class="ls_con_monety">￥222</view>
          <view class="ls_con_num">销量222</view>
        </view>
      </view>
    </view> -->
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from "vue";
  import ui from '@/utils/index.js'

  const paging = ref(null)
  const parms = reactive({
    pageNo: 1,
    pageSize: 10
  })
  const dataList = ref([{
      name: 'rtx 6750xt'
    },
    {
      name: 'rtx 4070ti'
    }
  ])
  // 轮播图配置信息
  const data = reactive({
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 500,
  });
  const images = ref([
    "https://cdn.uviewui.com/uview/swiper/1.jpg",
    "https://cdn.uviewui.com/uview/swiper/1.jpg",
    "https://cdn.uviewui.com/uview/swiper/1.jpg",
    "https://cdn.uviewui.com/uview/swiper/1.jpg",
  ]);
</script>

<style lang="scss">
  .content {

    .swiper {
      height: 400rpx;

      .swiper-item {
        width: 100%;
        display: block;
        height: 400rpx;

        .image {
          width: 100%;
          height: 400rpx;
        }
      }
    }

    .menu_tool {
      margin: 0 auto;
      width: 80%;
      padding: 0 20rpx;
      text-align: center;

      .menu_item {
        width: 140rpx;
        flex-wrap: wrap;

        .image {
          margin-top: 20rpx;
          width: 100rpx;
          height: 100rpx;
        }

        .span {
          margin-top: 20rpx;
          width: 100%;
          font-size: 28rpx;
          text-align: center;
        }
      }
    }

    .advertisement {
      width: 100%;
      height: 120rpx;
    }

    .lis_title {
      padding: 20rpx;
      font-size: 30rpx;
      font-weight: bold;
    }
  }

  .listStyle {
    padding: 0 20rpx;
    box-sizing: border-box;

    .ls_item {
      position: relative;
      width: 46%;
      height: 335rpx;
      background-color: #F2F2F2;
      border-radius: 5rpx;

      .icon {
        width: 100%;
        height: 160rpx;
      }

      .ls_title {
        margin-top: 15rpx;
        padding: 0 15rpx;
        height: 34rpx;
        box-sizing: border-box;

        // overflow: hidden;
        .ls_tle_type {
          margin-right: 10rpx;
          background-color: #40A9FF;
          padding: 5rpx 15rpx;
          border-radius: 10rpx;
          color: #fff;
          font-size: 24rpx;
          line-height: 24rpx;
        }

        .ls_tle_span {
          height: 34rpx;
          overflow: hidden;
          font-size: 24rpx;
        }

      }

      .ls_content {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 10rpx;
        height: 90rpx;

        .ls_con_monety {
          color: red;
          font-size: 24rpx;
        }

        .ls_con_num {
          color: #AAAAAA;
          font-size: 24rpx;
        }
      }
    }
  }
</style>